/*
 * @Author: 徐建辰
 * @LastEditors: 徐建辰
 * @Description: 抽离详情页设置样式逻辑代码
 */
const {getStatusBarHeight} = require('./tools')
const {HEIGHT, imgHeight} = require('./constant')

// 设置详情页头部图片样式
exports.setBgImageStyle = (scrollY, maxTranslateY, bgSrc) => {
  let zIndex = 10
  let height = 0
  let paddingTop = '70%'
  let scale = 1
  // 定义translateZ兼容ios不覆盖的问题
  let translateZ = 0
  if (scrollY > maxTranslateY) {
    zIndex = 19
    paddingTop = `${getStatusBarHeight()}px`
    height = `${HEIGHT}px`
    translateZ = 1
  }
  if (scrollY < 0) {
    scale = 1 + Math.abs(scrollY / imgHeight)
  }
  return {
    zIndex,
    height,
    paddingTop,
    backgroundImage: `url(${bgSrc})`,
    transform: `scale(${scale})translateZ(${translateZ}px)`
  }
}

// 设置详情页头部播放按钮样式
exports.setPlayBtnStyle = (scrollY, maxTranslateY) => {
  let display = ''
  if (scrollY > maxTranslateY) {
    display = 'none'
  }
  return display
}

// 设置filter样式
exports.setFilterStyle = (maxTranslateY, scrollY) => {
  let blur = 0
  // scrollY大于0则代表向上推
  if (scrollY >= 0) {
    blur = Math.min(maxTranslateY / imgHeight, scrollY / imgHeight) * 20
  }
  return `blur(${blur}px)`
}

// 为播放列表容器设置style
exports.setScrollStyle = () => {
  const {playlist} = getApp().globalData
  const bottom = playlist.length ? '60px' : '0'
  return {
    bottom,
    top: `${imgHeight}px`,
  }
}